<!DOCTYPE HTML>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title>Powerful JQuery Plugins</title>
    <link href="/js/jQueryUI/jquery-ui.css" type="text/css" rel="stylesheet"></link>
    <link href="/js/jQueryScrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet"></link>
  	<style type="text/css">
  		.container {
  			margin: 0 auto;
  		}
  		.container input {
  			width: 200px;
  			height: 50px;
  			border: 1px solid purple;
  			border-radius: 5px;
  			margin: 0;
  			padding: 0;
  		}
  		.container .username {
  			width: 400px;
  			border: 1px solid purple;
  			border-radius: 5px;
  			margin-bottom: 5px;
  		}
  		.container .account {
  			border-top-right-radius: 0;
  			border-bottom-right-radius: 0;
  			border-right: 1px solid purple;
  			outline: none;
  			border: none;
  		}
  		.container .email {
  			border-top-left-radius: 0;
  			border-bottom-left-radius: 0;
  			border-left: 1px solid purple;
  		}
  	</style>
  </head>
  
  <body>
  	<div class="container">
  		<div class="username">
  			<!-- 要想让两个input之间不存在间距，必须将两个input放在同一行才行 -->
			<input class="account" placeholder="邮箱账号或者qq号码"><input class="email" type="button" value="@qq.com">
		</div>
		<input class="password" placeholder="qq密码">
  	</div>
    <script src="/js/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <script src="/js/jQueryUI/jquery-ui.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/jquery.validate.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/messages_zh.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryScrollbar/perfect-scrollbar.jquery.js" type="text/javascript"></script>
  </body>
</html>